import React, { Component, Fragment } from 'react'
import { TodoHeader, TodoInput, TodoItem } from './components'


export default class App extends Component{
    constructor() {
        super()
        this.state = {
            todos: [
                {id:1, title:"吃饭", isCompleted:true},
                {id:2, title:"睡觉", isCompleted:false},
                {id:3, title:"打豆豆", isCompleted:true}
            ]
        }

    }
    statusHandler = (id) => {
        this.setState({
            todos: this.state.todos.map(item => {
                if(item.id === id){
                    item.isCompleted =!item.isCompleted
                }
                return item
            })
        })
    }
    deteleHandler = (id) => {
        this.setState({
            todos: this.state.todos.filter(todo => todo.id !== id)
        })
    }    
    addList = (title) => {
        this.setState({
            todos: this.state.todos.concat({
                id:Math.random(),
                title,
                isCompleted:false

            })
        })
    } 
    render() {
        return (
            <Fragment>
                <TodoHeader >
                    <h1>代办的具体事项</h1>
                    <h3>事情是做不完的</h3>
                </TodoHeader>
                <TodoInput addList={this.addList}/>
                <div>
                    {
                        this.state.todos.map(todo => {
                            // return <TodoItem id={todo.id} title={todo.title} isCompleted={todo.isCompleted}/>
                            return <TodoItem 
                            key={todo.id}
                            {...todo}
                            statusHandler={this.statusHandler}   
                            deteleHandler={this.deteleHandler}                         
                            />
                        })
                    }
                </div>                
            </Fragment>
        )
    }
}